<template>
  <div class="main">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="商品名称" prop="spuName">
        <el-input v-model="form.spuName" placeholder="请输商品名称"/>
      </el-form-item>
      <el-form-item label="商品标题" prop="title">
        <el-input v-model="form.title" placeholder="请输商品标题"/>
      </el-form-item>
      <el-form-item label="商品副标题" prop="subTitle">
        <el-input v-model="form.subTitle" maxlength="1000" show-word-limit type="textarea" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="所属分类" prop="catalogId">
        <category-cascader ref="catSelect" @change="catSelectChange" style="width: 100%"/>
      </el-form-item>
      <el-form-item prop="brandId">
          <span slot="label">
                <el-tooltip content="需要先指定所属分类" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                所属品牌
              </span>
        <el-select v-model="form.brandId" placeholder="请先选择所属分类" style="width: 100%" filterable clearable>
          <el-option v-for="i in brands" :label="i.name" :value="i.brandId" :key="i.brandId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="商品重量(kg)" prop="weight">
        <el-input-number v-model.number="form.weight" controls-position="right" :min="0" :precision="3" :step="1"/>
      </el-form-item>
      <el-form-item label="设置积分" prop="bounds">
        <span style="margin-right: 10px">金币</span>
        <el-input-number v-model="form.bounds.buyBounds" controls-position="right" :min="0" :precision="2"/>
        <span style="margin: 0 10px">成长值</span>
        <el-input-number v-model="form.bounds.growBounds" controls-position="right" :min="0" :precision="2"/>
      </el-form-item>
      <el-form-item label="商品描述" prop="spuDescription">
        <el-input v-model="form.spuDescription" type="textarea" placeholder="请输入内容"/>
      </el-form-item>
      <el-form-item label="商品图集" prop="imgs">
        <image-upload :value="form.imgs" @input="imgInput" :limit="20"/>
      </el-form-item>
      <el-form-item label="商品介绍">
        <image-upload :value="form.descImgs" @input="descImgInput" :limit="20"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'pubBase',
  data() {
    return {
      brands: [],
      form: {
        spuName: undefined,
        title: undefined,
        subTitle: undefined,
        spuDescription: undefined,
        catalogId: undefined,
        brandId: undefined,
        weight: 0,
        // 积分
        bounds: { buyBounds: undefined, growBounds: undefined },
        // 介绍
        descImgs: undefined,
        // 图集
        imgs: undefined
      },
      // 表单校验
      rules: {
        spuName: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        catalogId: [
          { required: true, message: '所属分类不能为空', trigger: 'blur' }
        ],
        brandId: [
          { required: true, message: '所属品牌不能为空', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '商品重量不能为空', trigger: 'blur' }
        ],
        imgs: [
          { required: true, message: '图集不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取分类对应的品牌列表
    getBrands(catId) {
      this.brands = []
      if (catId) {
        this.$api.get('/product/brand/listByCatId/' + catId).then(({ data }) => {
          if (data.length) {
            this.brands = data
          } else {
            this.$modal.msgWarning('该分类下没有对应的品牌')
          }
        })
      }
    },
    catSelectChange(arr) {
      this.form.catalogId = undefined
      this.form.brandId = undefined
      this.brands = []
      if (arr.length) {
        // 获取选中的分类
        const catId = arr[arr.length - 1]
        this.form.catalogId = catId
        // 查询对应的品牌
        this.getBrands(catId)
      }
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid, errFields) => {
          // 表单校验通过，使用resolve返回true，否则返回false
          resolve(valid)
        })
      })
    },
    descImgInput(url) {
      this.form.descImgs = url ? url.split(',') : []
    },
    imgInput(url) {
      this.form.imgs = url ? url.split(',') : []
    },
    // 获取表单数据
    getForm() {
      return this.form
    }
  }
}
</script>

<style scoped>
.main {
  margin: 30px 70px 0 70px;
}
</style>
